<template>
	<el-container class="wrapper-container">
		<el-aside width="200px" class="aside">
			<AsidePanel></AsidePanel>
		</el-aside>
		<el-container>
			<el-header class="f-between header">
				<p>操作区域</p>
				<div class="btn">
					<!-- <el-button @click="drawer = !drawer">
						<el-icon>
							<icon-setting-one />
						</el-icon>
						配置
					</el-button> -->
					<el-button @click="handleBack">
						返回
					</el-button>
					<el-button type="primary" @click="handleSave">
						<el-icon>
							<icon-save />
						</el-icon>
						保存
					</el-button>
				</div>
			</el-header>
			<el-main>
				<el-scrollbar height="80vh">
					<MainWidget></MainWidget>
				</el-scrollbar>
			</el-main>
		</el-container>
		<el-drawer v-model="drawer" title="公共配置">
			<RightPanel></RightPanel>
		</el-drawer>
	</el-container>
</template>

<script setup lang="ts">
import MainWidget from '../MainWidget/index.vue'
import AsidePanel from '../AsidePanel/index.vue'
import RightPanel from '../RightPanel/index.vue'
import apiMod from '@/apiMod'
import { useDesign } from '@/stores/design'
import { onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const { setDesignData } = useDesign()
const { componentList } = storeToRefs(useDesign())
const drawer = ref(false)

const route = useRoute()
const router = useRouter()
const props = defineProps<{
	nowRowData?: any
}>()

const emit = defineEmits(['refresh'])

const formModel = ref({ ...props.nowRowData })
const handleSave = () => {
	const saveData = (value) => {
		const params = {
			id: formModel.value?.id,
			roleId: route.query.id,
			roleName: route.query.name,
			moudleName: value,
			configJson: JSON.stringify(componentList.value),
		}
		const baseApi = formModel.value?.id ? 'view_workbenchConfig_edit' : 'saveWorkSpace'
		apiMod[baseApi](params).then(() => {
			ElMessage({
				type: 'success',
				message: `操作成功`,
				duration: 1000,
				onClose: () => {
					if (route.query.id) router.go(-1)
				},
			})
			emit('refresh')
		})
	}
	if (formModel.value?.moudleName) {
		saveData(formModel.value?.moudleName)
	} else {
		ElMessageBox.prompt('请输入模块名称', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
		})
			.then(({ value }) => {
				saveData(value)
			})
			.catch(() => {})
	}
}

const getInitData = (roleId, name) => {
	apiMod
		.view_workbenchConfig_page({
			roleId: roleId,
		})
		.then((res) => {
			const data = res.data.records[0] || {}
			if (data.configJson) {
				const config = JSON.parse(data.configJson)
        setDesignData(config)
			}else {
         setDesignData([])
      }
			formModel.value = {
				...data,
				moudleName: data.moudleName || name,
			}
		})
}

const handleBack = () => {
	if (route.query.id) {
		router.go(-1)
	}
	emit('refresh')
}

onMounted(() => {
	if (route.query.id) {
		getInitData(route.query.id, route.query.name)
		return
	}
	if (props.nowRowData?.configJson) {
		setDesignData(JSON.parse(props.nowRowData.configJson))
	} else {
		setDesignData([])
	}
})
</script>

<style scoped lang="scss">
.wrapper-container {
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	.aside {
		background: #fff;
	}
	.header {
		border-bottom: 1px solid #fff;
	}
}
</style>
